import React from 'react';
import {
  Select,
  DatePicker,
  Tooltip,
  Cascader,
  Empty,
  Row,
  Col,
  Table,
} from 'antd';
const { Option } = Select;
import moment from 'moment';
import {
  QuestionCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import ChartPanel from '@/components/base/charts';
import { getLenedgColumns, getLenedgData } from '@/utils/base/mock';

/**饼图 */
export const RenderPieChart = (props) => {
  const {
    data = [],
    id = '',
    option = {},
    unit = '',
    name = '数值',
    height = '400px',
  } = props;
  return (
    <div className="chart-panel">
      {data.length > 0 &&
      data.some((item) =>
        item.valuess
          ? Number(item.valuess) !== 0 || Number(item.value) !== 0
          : Number(item.value) !== 0,
      ) ? (
        <Row>
          <Col span={10}>
            <ChartPanel option={option} chartId={id} />
          </Col>
          <Col span={14}>
            <Table
              className="lenged-table"
              columns={getLenedgColumns(name)}
              dataSource={getLenedgData(data, unit)}
              pagination={false}
              size="small"
            />
          </Col>
        </Row>
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          style={{
            width: '100%',
            height: 'calc(100% - 56px)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        />
      )}
    </div>
  );
};
